<template>
    <div class="yx-wechat-box" :style="bgColor + effect">
        <Hover v-if="hover.showHover" :brickInfo="brickInfo" :hover="hover"/>
        <div class="wechat">
            <header class="wechat-item header-img" :style="backgroundImg"/>
            <div class="wechat-item wechat-id"
                 id="_data"
                 :style="color"
                 v-text="content.wechatNumber"/>
            <div class="wechat-item wechat-follow"
                 id="wechatFollow"
                 :style="btnBgc + btnTextColor"
                 data-clipboard-target="#_data"
                 @click="openDialog();">
                <font>+</font>
                关注
            </div>
        </div>
        <div class="dialog-copy" :class="{'dialog-none':copyDialog}">
            <div class="copy-info-box">
                <div class="title">
                    <div class="success-icon"/>
                    <span class="notice-title">复制成功</span>
                </div>
                <div class="content">您已成功复制微信号，是否立即跳转到微信搜索该微信号？</div>
                <div class="btn-box">
                    <div class="btn popup-cancle"
                         @click.stop="copyDialog = true;">
                        取消
                    </div>
                    <div class="btn popup-confirm"
                         @click.stop="openwx();">
                        确定
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Hover from '../common/mainpage/Hover.vue';
    import Stats from '../stats.js';
    import Clipboard from 'clipboard';

    export default {
        name: 'YXWeChat',
        props: {
            hover: {
                type: Object,
                default: _ => {
                    return {
                        showHover: false,
                        brickHover: true,
                        isSaved: true
                    };
                }
            },
            isEdit: {
                type: Boolean,
                default: false
            },
            brickInfo: {
                type: Object,
                default: _ => {
                    return {
                        active: false
                    };
                }
            },
            content: {
                type: Object,
                default: _ => {
                    return {
                        wechatNumber: '微信号',
                        url: ''
                    };
                }
            },
            appearance: {
                type: Object,
                default: _ => {
                    return {
                        bgColor: {
                            color: 'rgba(255, 255, 255, 1)'
                        },
                        color: {
                            color: 'rgba(255, 255, 255, 1)'
                        },
                        btnColor: {
                            color: 'rgba(255, 255, 255, 1)'
                        },
                        btnBgColor: {
                            color: 'rgba(253, 65, 95, 1)'
                        },
                        effect: {
                            value: ''
                        }
                    };
                }
            },
            shortIndex: {
                type: String,
                default: ''
            }
        },
        components: {
            Hover
        },
        data() {
            return {
                copyDialog: true
            };
        },
        computed: {
            backgroundImg() {
                return `background-image: url(${this.content.url});`;
            },
            bgColor() {
                return `background-color: ${this.appearance.bgColor.color};`;
            },
            color() {
                return `color: ${this.appearance.color.color};`;
            },
            btnBgc() {
                return `background-color: ${this.appearance.btnBgColor.color};`
            },
            btnTextColor() {
                return `color: ${this.appearance.btnColor.color};`;
            },
            effect() {
                let ev = this.appearance.effect.value;

                if (ev) {
                    if (this.isEdit) {
                        return `position: absolute;${ev}: 0;z-index: 2000;`;
                    } else {
                        return `position: fixed;${ev}: 0;z-index: 2000;`;
                    }
                }
                return '';
            }
        },
        methods: {
            openDialog() {
                this.copyDialog = false; // 放在回调中移动端打不开弹窗
                // 注意要使用let或者const，不能使用var，否则会出现复制次数叠加的问题，即复制不止一次。
                const clipboard = new Clipboard('#wechatFollow');
                clipboard.on('success', e => {
                    this.copyDialog = false; // 放在回调中移动端打不开弹窗
                    // 使用destroy可以清楚缓存
                    clipboard.destroy();
                });
                clipboard.on('error', e => {
                    clipboard.destroy();
                });
            },
            openwx() {
                this.copyDialog = true;
                let url = 'weixin://';
                if (/ipad|iphone|mac/i.test(navigator.userAgent)) {
                    let ifr = document.createElement('iframe');
                    ifr.src = url;
                    ifr.style.display = 'none';
                    document.body.appendChild(ifr);
                } else {
                    window.location.href = url;
                }
                if (this.shortIndex) {
                    Stats.sendRequest('h5_wx_click', this.shortIndex);
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .yx-wechat-box {
        position: relative;
        width: 100%;
        height: 46px;
        z-index: 10;

        @mixin over-ellipsis {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .wechat {
            height: 100%;
            box-sizing: border-box;
            padding: 7px 14px;
            font-size: 16px;
            display: flex;
            justify-content: space-between;

            .wechat-item {
                height: 100%;
            }
            .header-img {
                width: 32px;
                border-radius: 50%;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                border: 1px solid rgba(0, 0, 0, .15);
            }
            .wechat-id {
                flex: 1;
                line-height: 32px;
                text-indent: .5rem;
                /*user-select: none;*//*不能加，否则无法复制*/
                @include over-ellipsis;
            }
            .wechat-follow {
                width: 74px;
                line-height: 32px;
                text-align: center;
                font-size: 14px;
                font-weight: bold;
                cursor: pointer;
                border-radius: 16px;
            }
        }
        .dialog-copy {
            overflow: hidden;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0px;
            left: 0px;
            z-index: 2999;
            background-color: rgba(0, 0, 0, 0.5);

            .copy-info-box {
                width: 240px;
                height: 200px;
                border-radius: 5px;
                text-align: center;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -80%);
                background-color: #fff;

                .title {
                    .success-icon {
                        width: 40px;
                        height: 40px;
                        margin: 16px auto 0;
                        background: url("./imgs/success.png") no-repeat center;
                        background-size: contain;
                    }
                }
                .content {
                    font-size: 12px;
                    padding: 10px 22px;
                }
                .btn-box {
                    margin-top: 14px;
                    font-size: 14px;
                    pointer-events: auto;

                    .btn {
                        width: 56px;
                        height: 18px;
                        display: inline-block;
                        line-height: 18px;
                        text-align: center;
                        user-select: none;
                        cursor: pointer;
                        padding: 6px 12px;
                        border-radius: 18px;
                    }
                    .popup-cancle {
                        margin-right: 10px;
                        border: 1px solid #999999;
                        color: #999999;
                    }
                    .popup-confirm {
                        border: 1px solid #00D48C;
                        color: #00D48C;
                    }
                }
            }
        }
        .dialog-none {
            display: none;
        }
    }
</style>
